<template>
  <div class="products-container">
    <h1>产品中心</h1>
    <p>探索我们的任务管理系统提供的丰富功能</p>
    
    <div class="product-categories">
      <button 
        v-for="category in categories" 
        :key="category.id"
        :class="['category-btn', { active: activeCategory === category.id }]"
        @click="filterByCategory(category.id)"
      >
        {{ category.name }}
      </button>
    </div>
    
    <div class="products-grid">
      <div 
        v-for="product in filteredProducts" 
        :key="product.id"
        class="product-card"
      >
        <div class="product-icon">
          {{ product.icon }}
        </div>
        <h3>{{ product.name }}</h3>
        <p>{{ product.description }}</p>
        <div class="product-features">
          <span v-for="feature in product.features" :key="feature">{{ feature }}</span>
        </div>
      </div>
    </div>
    
    <div class="pricing-section">
      <h2>灵活的定价方案</h2>
      <div class="pricing-cards">
        <div class="pricing-card">
          <h3>免费版</h3>
          <div class="price">¥0<span>/月</span></div>
          <ul>
            <li>最多3个项目</li>
            <li>基础任务管理</li>
            <li>日历视图</li>
            <li>最多5名团队成员</li>
          </ul>
          <button class="pricing-btn">立即注册</button>
        </div>
        
        <div class="pricing-card popular">
          <div class="popular-badge">推荐</div>
          <h3>专业版</h3>
          <div class="price">¥39<span>/月</span></div>
          <ul>
            <li>无限项目</li>
            <li>高级任务管理</li>
            <li>高级报表分析</li>
            <li>最多20名团队成员</li>
            <li>优先技术支持</li>
          </ul>
          <button class="pricing-btn popular-btn">立即升级</button>
        </div>
        
        <div class="pricing-card">
          <h3>企业版</h3>
          <div class="price">¥99<span>/月</span></div>
          <ul>
            <li>无限项目</li>
            <li>专属定制功能</li>
            <li>高级安全控制</li>
            <li>无限团队成员</li>
            <li>24/7专属技术支持</li>
            <li>API访问权限</li>
          </ul>
          <button class="pricing-btn">联系销售</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductsPage',
  data() {
    return {
      activeCategory: 'all',
      categories: [
        { id: 'all', name: '全部功能' },
        { id: 'task', name: '任务管理' },
        { id: 'team', name: '团队协作' },
        { id: 'report', name: '数据分析' }
      ],
      products: [
        {
          id: 1,
          name: '智能任务管理',
          description: '创建、分配和跟踪任务的完整解决方案',
          icon: '📋',
          category: 'task',
          features: ['拖放排序', '截止日期提醒', '优先级标记', '子任务']
        },
        {
          id: 2,
          name: '团队协作中心',
          description: '实时协作和沟通，提高团队效率',
          icon: '👥',
          category: 'team',
          features: ['实时评论', '文件共享', '团队日历', '活动日志']
        },
        {
          id: 3,
          name: '数据分析仪表板',
          description: '可视化您的工作流程和生产力',
          icon: '📊',
          category: 'report',
          features: ['自定义报表', '生产力分析', '资源分配', '趋势预测']
        },
        {
          id: 4,
          name: '日历视图',
          description: '以日历格式查看和管理您的任务',
          icon: '📅',
          category: 'task',
          features: ['月/周/日视图', '日程安排', '冲突检测', '外部日历同步']
        },
        {
          id: 5,
          name: '项目模板',
          description: '使用预定义模板快速启动新项目',
          icon: '🚀',
          category: 'task',
          features: ['项目模板库', '自定义模板', '一键应用', '模板分享']
        },
        {
          id: 6,
          name: '高级权限管理',
          description: '精细控制团队成员的访问权限',
          icon: '🔒',
          category: 'team',
          features: ['角色分配', '资源访问控制', '权限审核', '安全日志']
        }
      ]
    }
  },
  computed: {
    filteredProducts() {
      if (this.activeCategory === 'all') {
        return this.products
      }
      return this.products.filter(product => product.category === this.activeCategory)
    }
  },
  methods: {
    filterByCategory(categoryId) {
      this.activeCategory = categoryId
    }
  }
}
</script>

<style scoped>
.products-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.products-container h1 {
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 0.5rem;
  color: #333;
}

.products-container p {
  text-align: center;
  color: #666;
  margin-bottom: 2rem;
}

.product-categories {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.category-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-btn:hover {
  background-color: #f0f0f0;
}

.category-btn.active {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.product-card {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-align: center;
}

.product-card h3 {
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 0.5rem;
  color: #333;
}

.product-card p {
  font-size: 0.95rem;
  color: #666;
  text-align: left;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.product-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-features span {
  background-color: #e9ecef;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  color: #495057;
}

.pricing-section {
  margin-top: 3rem;
  text-align: center;
}

.pricing-section h2 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  color: #333;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.pricing-card {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 2rem;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.pricing-card.popular {
  border-color: #42b983;
  box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.1);
}

.popular-badge {
  position: absolute;
  top: -10px;
  right: 20px;
  background-color: #42b983;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.pricing-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #333;
}

.price {
  font-size: 2rem;
  font-weight: bold;
  color: #42b983;
  margin-bottom: 1.5rem;
}

.price span {
  font-size: 1rem;
  font-weight: normal;
  color: #666;
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
  text-align: left;
}

.pricing-card li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: #666;
}

.pricing-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #42b983;
  font-weight: bold;
}

.pricing-btn {
  padding: 0.75rem 1.5rem;
  background-color: white;
  color: #42b983;
  border: 2px solid #42b983;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  width: 100%;
}

.pricing-btn:hover {
  background-color: #42b983;
  color: white;
}

.pricing-btn.popular-btn {
  background-color: #42b983;
  color: white;
}

.pricing-btn.popular-btn:hover {
  background-color: #35495e;
  border-color: #35495e;
}
</style>